
<template>
  <div class="Main">
    <div class="MainTitle">医院列表</div>
    <div class="MianContent">
      <div class="MainTopAction">
        <div class="flex align-center">
          <a-button
            style="margin-right: 10px"
            icon="plus"
            type="primary"
            @click="addBrand"
            >新增医院</a-button
          >
          <!-- <a-select
              v-model="type"
              placeholder="选择类型查找"
              allowClear
              style="width: 220px"
              @change="selectType"
            >
              <a-select-option :value="1"> 能力 </a-select-option>
              <a-select-option :value="2"> 气质 </a-select-option>
            </a-select> -->
        </div>
        <div class="flex align-center">
          <a-input
            v-model="keyword"
            allowClear
            @change="InputChange"
            style="width: 300px"
            placeholder="请输入医院信息查询"
          />
          <a-button class="ml-10" type="primary" @click="SeachKeyword"
            >搜索</a-button
          >
        </div>
      </div>
      <div class="TableView">
        <!-- :scroll="{ x: 1600, y: '' }" -->
        <a-table
          :columns="listfields"
          :data-source="listData"
          bordered
          size="middle"
          :pagination="false"
        >
          <div slot="indexNum" slot-scope="row, index">
            {{ (pageno * 1 - 1) * pagesize + (index.indexNum * 1 + 1) }}
          </div>
          <div slot="action" slot-scope="row, index">
            <!-- <a-button type="primary" size="small" @click="GoOrderDetail(index)">上架</a-button> -->
            <a-button
              style="margin: 0 10px 0 0"
              type="primary"
              size="small"
              @click="EditBrand(index)"
              >编辑</a-button
            >
            <a-popconfirm
              placement="bottom"
              ok-text="删除"
              cancel-text="取消"
              @confirm="DeleteItem(index)"
            >
              <template slot="title">
                <p>警告</p>
                <p>此操作将删除该医院, 是否继续?</p>
              </template>
              <a-button type="danger" size="small">删除</a-button>
            </a-popconfirm>
            <!-- <a-button style="margin:0 0px 0 10px;" type="info" size="small" @click="BrandStatus(index)">{{index.status?'下架':'上架'}}</a-button> -->
          </div>
		      <div slot="logo" slot-scope="row, index">
		        <div @click="ClickLookImage(row)" v-if="row">
		          <img :src="row" style="width: 50px; height: 50px" />
		        </div>
		      </div>
        </a-table>
        <Pagination
          :total="total"
          v-model="pageno"
          :pageSize.sync="pagesize"
          @change="handlePageChange"
          @onShowSizeChange="onShowSizeChange"
        ></Pagination>
      </div>
    </div>
    <a-modal
      :title="ModalTitle"
      v-if="visible"
      v-model="visible"
      :width="620"
      :centered="true"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div style="padding-left: 10px">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item ref="title" label="医院名称" prop="title">
            <a-input
              v-model="form.title"
              placeholder="请输入医院名称"
              allowClear
            />
          </a-form-model-item>
          <a-form-model-item ref="name" label="联系人" prop="name">
            <a-input
              v-model="form.name"
              placeholder="请输入联系人"
              allowClear
            />
          </a-form-model-item>
          <a-form-model-item ref="phone" label="联系电话" prop="phone">
            <a-input
              v-model="form.phone"
              placeholder="请输入联系电话"
              allowClear
            />
          </a-form-model-item>
          <a-form-model-item label="省份" prop="province_id">
            <a-select
              style="width: 180px; margin-right: 20px"
              allowClear
              placeholder="请选择省份"
              v-model="form.province_id"
              @change="handleChangeProvince"
            >
              <a-select-option
                :value="item.cityid"
                v-for="(item, index) in provinceList"
                :key="index"
              >
                {{ item.city_name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="城市" prop="city_id">
            <a-select
              style="width: 180px; margin-right: 20px"
              allowClear
              placeholder="请选择城市"
              v-model="form.city_id"
              @change="handleChangeCity"
            >
              <a-select-option
                :value="item.cityid"
                v-for="(item, index) in cityList"
                :key="index"
              >
                {{ item.city_name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="地区" prop="district_id">
            <a-select
              style="width: 180px; margin-right: 20px"
              allowClear
              placeholder="请选择地区"
              v-model="form.district_id"
              @change="handleChangeDistrict"
            >
              <a-select-option
                :value="item.cityid"
                v-for="(item, index) in districtList"
                :key="index"
              >
                {{ item.city_name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="详细地址" prop="address">
            <a-input
              v-model="form.address"
              placeholder="请输入详细地址"
              allowClear
            />
          </a-form-model-item>
          <a-form-model-item label="排序" prop="sort">
            <a-input
              v-model="form.sort"
              placeholder="请输入排序"
              allowClear
            />
          </a-form-model-item>
          <a-form-model-item label="医院图片">
            <UploadImage v-model="image" :maxNum="1"></UploadImage>
          </a-form-model-item>
          <a-form-model-item label="简介" prop="desc">
            <a-textarea
                  placeholder="请输入简介，最长50字！"
                  :maxLength="50"
                  v-model="form.desc"
                  :rows="4"
                />
          </a-form-model-item>
        </a-form-model>
      </div>
      <!-- <template slot="footer">
        <div>
          <a-button size="small" @click="handleCancel">取消</a-button>
          <a-button
            type="primary"
            size="small"
            @click="handleOk"
            :loading="creatLoading"
            >确定</a-button
          >
        </div>
      </template> -->
    </a-modal>
    <a-modal v-model="LookImages" :z-index="10001" :footer="null" centered>
        <div style="margin: 10px;">
            <img :src="SelectImg" style="width: 100%;height: 100%;">
        </div>
    </a-modal>


  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import { HospitalManageIndex } from "@/views/Columns/HospitalManage";
import UploadImage from "@/components/common/Upload";
import { GetProvinceList, GetCityList, GetDistrictList, HospitalList, HospitalAdd, HospitalDelete, HospitalEdit, HospitalView } from "@/api/api.js";
import env from "@/config/env";
import request from "@/utils/request";
import Vue from "vue";

export default {
  name: "list",
  components: {
    Pagination,
    UploadImage,
  },
  data() {
    return {
      total: 0, //定义初始有多少条数据
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据
      keyword: "",
      OrderStatus: "",
      listfields: HospitalManageIndex, //表头列表
      listData: [], //表格数据

      SelectImg:'',
      LookImages: false,

      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      visible: false,
      ModalTitle: "新增医院",
      provinceList:[],
      cityList:[],
      districtList:[],
      form: {
        title:'',
        name: "",
        phone: "",
        province_id: undefined, //选择的省份id
        city_id: undefined, //选择的城市id
        district_id: undefined, //选择的地区id
        province:'',
        city:'',
        district:'',
        address: "",
        sort:'',
        desc:'',
        // score: "",
      },
      image: [],
      rules: {
        title: [{ required: true, message: "请输入医院名称!", trigger: "blur" }],
        name: [
          { required: true, message: "请输入联系人!", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入联系电话!", trigger: "blur" },
        ],
        province_id: [
          { required: true, message: "请选择省份!", trigger: "blur" },
        ],
        city_id: [{ required: true, message: "请选择城市!", trigger: "blur" }],
        district_id: [
          { required: true, message: "请选择地区!", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入详细地址!", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "请输入排序!", trigger: "blur" },
        ],
        desc: [
          { required: true, message: "请输入简介!", trigger: "blur" },
        ],
      },
      itemId: null, //数据源id
      //   creatLoading: false,
    };
  },
  computed: {
    ...mapState({}),
  },
  created() {},
  mounted() {
    let that = this;
    that.GetList();
    that.GetProvinceList()
  },
  methods: {
    ...mapActions({}),

    // 查看图片
    ClickLookImage(row){
      const that = this;
      that.LookImages = true;
      that.SelectImg = row;
    },

    // 上下架
    async BrandStatus(row) {
      const that = this;
      let params = {
        id: row.ID,
        status: row.status ? false : true,
      };
      let res = await BrandStatus(params);
      if (res.data.code == 0) {
        showSuccess("操作成功！");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },

    // 删除按钮
    async DeleteItem(row) {
      const that = this;
      let params = {
        id: row.id,
      };
      let res = await HospitalDelete(params);
      if (res.data.code == 1) {
        showSuccess("删除成功！");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },

    // 新增按钮
    addBrand() {
      const that = this;
      that.itemId = null;
      that.ModalTitle = "新增医院";
      that.visible = true;
    },
    // 编辑按钮
    EditBrand(row) {
      const that = this;
      that.itemId = row.id;
      that.HospitalView();
    },

    // 获取详情
    async HospitalView() {
      const that = this;
      let res = await HospitalView({ id: that.itemId });
      if(res.data.code == 1){
        let data = res.data.data;

        that.form.title = data.title;
        that.form.name = data.name;
        that.form.phone = data.phone;

        that.form.province_id = data.province_id;
        that.form.city_id = data.city_id;
        that.form.district_id = data.district_id;

        that.form.province = data.province;
        that.form.city = data.city;
        that.form.district = data.district;

        that.form.address = data.address;
        that.form.sort = data.sort;
        that.form.desc = data.desc;
        that.image = data.logo ? [{ url: data.logo }] : [];
        that.ModalTitle = "编辑医院";
        if(data.province_id){
          that.GetCityList()
        }
        if(data.city_id){
          that.GetDistrictList()
        }
        that.visible = true;
      }
    },

    // 弹窗取消关闭
    handleCancel() {
      const that = this;
      that.$refs.ruleForm.resetFields();
      that.form.title = '';
      that.form.name = '';
      that.form.phone = '';
      that.form.province_id = '';
      that.form.city_id = '';
      that.form.district_id = '';
      that.form.province = '';
      that.form.city = '';
      that.form.district = '';
      that.form.address = '';
      that.form.sort = '';
      that.form.desc = '';
      that.image = [];

      that.visible = false;
    },
    // 弹窗确认按钮
    handleOk() {
      const that = this;
      //   that.creatLoading = true;
      that.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          console.log(that.image);
          let imgArr = [];
          that.image.forEach((item) => {
            imgArr.push(item.url);
          });
          console.log(imgArr);

          let params = {
            title:that.form.title,
            name:that.form.name,
            phone:that.form.phone,
            desc:that.form.desc,
            sort:that.form.sort,
            province_id:that.form.province_id,
            city_id:that.form.city_id,
            district_id:that.form.district_id,
            province:that.form.province,
            city:that.form.city,
            district:that.form.district,
            address:that.form.address,
            logo: imgArr[0],
          };
          let res;
          if (that.itemId) {
            //编辑
            params.id = that.itemId;
            res = await HospitalEdit(params);
          } else {
            // 新增
            res = await HospitalAdd(params);
          }
          if (res.data.code == 1) {
            showSuccess(that.itemId ? "编辑成功" : "添加成功");
            // that.visible = false;
            that.handleCancel();
            that.GetList();
          } else {
            showError(res.data.msg);
          }
        } else {
          //   that.creatLoading = false;
        }
      });
    },

    // 获取省份
    async GetProvinceList() {
      const that = this;
      let res = await GetProvinceList();
      if (res.data.code == 1) {
        that.provinceList = res.data.data;
      }
    },
    // 获取城市
    async GetCityList() {
      const that = this;
      let res = await GetCityList({ province_id: that.form.province_id });
      if (res.data.code == 1) {
        that.cityList = res.data.data;
      }
    },
    // 获取地区
    async GetDistrictList() {
      const that = this;
      let res = await GetDistrictList({ city_id: that.form.city_id });
      if (res.data.code == 1) {
        that.districtList = res.data.data;
      }
    },

    // 选择省份
    handleChangeProvince(e) {
      console.log(e);
      const that = this;
      let itemIndex = that.provinceList.findIndex(item=>item.cityid == e);
      if(itemIndex != -1){
        that.form.province = that.provinceList[itemIndex].city_name
      }
      console.log(itemIndex,that.form.province,'====')
      that.GetCityList();
      if (!that.province_id) {
        that.cityList = [];
        that.districtList = [];
        that.form.city_id = undefined;
        that.form.district_id = undefined;
        that.form.city = '';
        that.form.district = '';
      }
    },
    // 选择城市
    handleChangeCity(e) {
      const that = this;
      let itemIndex = that.cityList.findIndex(item=>item.cityid == e);
      if(itemIndex != -1){
        that.form.city = that.cityList[itemIndex].city_name
      }
      that.GetDistrictList();
      if (!that.city_id) {
        that.districtList = [];
        that.form.district_id = undefined;
        that.form.district = '';
      }
    },
    // 选择地区
    handleChangeDistrict(e) {
      const that = this;
      let itemIndex = that.districtList.findIndex(item=>item.cityid == e);
      if(itemIndex != -1){
        that.form.district = that.districtList[itemIndex].city_name
      }
    },

    // 选择type获取列表
    selectType() {
      const that = this;
      that.GetList();
    },

    InputChange(e) {
      let that = this;
      if (e.target.value == "") {
        that.GetList();
      }
    },
    SeachKeyword() {
      let that = this;
      that.GetList();
    },
    GoOrderDetail(row) {
      this.$router.push({
        name: "OrderInfo",
        query: { id: row.id, back: "OrderList" },
      });
    },
    // 获取数据列表API
    async GetList() {
      let that = this;
      let params = {
        keyword:that.keyword,
        page: that.pageno,
        pageSize: that.pagesize,
      };
      const res = await HospitalList(params);
      if (res.data.code == 1) {
        // console.log(res.data);
        const data = res.data.data;
        if (data.list.length > 0) {
          data.list.forEach((item, index) => {
            item.key = item.id;
            item.indexNum = index;
            // item.CreatedAt = new Date(item.CreatedAt).toLocaleString(); //地区时间转换
            // item.create_time = that.$moment(item.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss'); //时间戳转换成时间
          });
        }
        // console.log(data);
        that.total = data.count;
        that.listData = data.list;
      } else {
        showError(res.data.msg);
      }
    },

    //分页器
    handlePageChange(pageno, pagesize) {
      //点击第几页触发的函数
      let that = this;
      that.pageno = pageno;
      that.pagesize = pagesize;
      that.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChange(current, size) {
      //改变每页显示条目数的函数
      let that = this;
      //pagesize 变化的回调
      that.pageno = current;
      that.pagesize = size;
      that.GetList(); //这个是向后台请求的数据函数
    },
  },
};
</script>

<style lang="less">
.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }

  .MainTitle:before {
    content: "";
    width: 40px;
    height: 12px;
    background: linear-gradient(
      270deg,
      rgba(0, 158, 238, 0) 0%,
      rgba(221, 169, 85, 0.3) 100%
    );
    position: absolute;
    bottom: 2px;
    left: 0;
  }

  .MianContent {
    padding: 10px 20px 20px 20px;

    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .TabsItem {
      padding: 10px 0;
      width: 70px;
      position: relative;
      margin-right: 24px;
      text-align: center;
      cursor: pointer;
      margin-bottom: 20px;
      color: #000;
    }

    .TabsIndex {
      color: #dda955;
    }

    .TabsIndex::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 50px;
      height: 2px;
      background-color: #dda955;
    }
  }
}
</style>